<template>
  <!-- 底部购物车栏 -->
  <div class="fixed-bottom ">
    <!-- 采购中心商品详情购物车 -->
    <div v-show="carType==='purchase'" class="flex-fe-c bottom-box pr-250 pl-150">
      <div class="bg-white pos-a is-92 shop-cart-out">
        <div class="shop-cart-in pos-a bg-primary is-80 flex-center">
          <svg-icon icon-class="car-new" class="color-white fs-40" @goPage="showCartList" />
          <div class="pos-a shop-cart-num">{{ totalAmount }}</div>
        </div>
      </div>
      <p class="fs-28">累计金额：<span class="color-primary"><b class="fs-36">{{ totalMoney }}</b>元</span></p>
      <button v-show="cartList&&cartList.length<=1" class=" bg-primary color-white btn fs-28" @click="submitBuy">去结算</button>
      <button v-show="cartList&&cartList.length>1" class=" bg-primary color-white btn fs-28" @click="goCar">去购物车</button>
    </div>

    <!-- 购物车页面 -->
    <div v-show="carType==='shopCar'" class="flex-s-c bottom-box bottom-box-1">
      <div v-show="buyState" class="flex-s-c ">
        <div class="flex-1 pl-45">
          <p class="fs-28">件数：<span class="color-primary"><b class="fs-30">{{ totalNum }}</b>件</span></p>
          <p class="fs-28">金额：<span class="color-primary"><b class="fs-30">{{ totalPrice }}</b>元</span></p>
        </div>
        <button class=" bg-primary color-white btn fs-28" @click="goSubmitOrder">去结算</button>
      </div>
      <div v-show="!buyState" class="flex-s-c flex-1 ">
        <p class="checkbox" :class="checkAllState?'checked':''" @click="checkAll">全选</p>
        <p>
          <span class="color-gray dib lh-60" @click="cleanCart">清空购物车</span>
          <span class="hollow-btn" @click="DeleteUserCar">删除</span>
        </p>
      </div>
    </div>

    <!-- 提交订单页面 -->
    <div v-show="carType==='submit'" class="flex-s-c bottom-box bottom-box-1 pr-250">
      <p class="fs-28 ml-45 mr-20 flex-s-0">{{ totalType }}种{{ totalNum }}件</p>
      <p class="fs-28 mr-20">金额：<span class="color-primary"><b class="fs-30">{{ totalPay }}</b>元</span></p>
      <button class=" bg-primary color-white btn fs-28" @click="gotoPay">提交订单</button>
    </div>

    <!-- 购物车列表弹窗 -->
    <div v-show="showList" class="cart-popup">
      <div class="cart-shadow" @click.stop="hiddenCartList" />
      <div class="cart-list-box">
        <div class="cart-tle flex-s-c color-gray-light fs-26">
          <p>已选数量：<span class="color-primary">{{ totalAmount }}</span></p>
        </div>
        <div class="flex-v-c pd-20 mg-25 bg-gray br-12">
          <img-box class="is-120 mr-20" :img-url="productData.ProductImg" />
          <p class="text-show-line-2">{{ productData.ProductName }}</p>
        </div>
        <div v-for="(items,ind) in cartList" :key="ind">
          <div class="flex-s-c ptb-10  plr-20  pos-r">
            <div class="bg-second icon-box flex-center mr-10">
              <svg-icon icon-class="store-1" class="color-white fs-24" />
            </div>
            <p class="fs-26 color-black flex-1">{{ items.PurchaseMemberName }}</p>
          </div>
          <ul class="plr-25 cart-list pt-20">
            <li v-for="(item,index) in items.PurchaseProductSkuByCarList" :key="index" class="cart-item ">
              <div class="flex-s-c mb-10">
                <div class="flex-s-0  ">
                  <p class="fs-28 lh-xxs">{{ item.DispalyAttribute }}</p>
                </div>
                <div class="flex-fe-c flex-s-0 ml-50 cart-spec">
                  <span class="btn-minus flex-s-0 " :class="item.Amount<=0?'color-shadow':''" @click="changeAmount(item,item.Amount,item.Stock,-1,productData.MinNum,1,productData.LimitBuy,productData.AddNum)">-</span>
                  <div class="btn-input-box">
                    <input v-model="item.Amount" type="number" class="btn-input" @blur="changeAmount(item,item.Amount,item.Stock,0,productData.MinNum,1,productData.LimitBuy,productData.AddNum)">
                  </div>
                  <span class="btn-plus flex-s-0" :class="(item.Amount>=item.Stock||(item.Amount>=item.LimitBuy&&item.LimitBuy>0))?'color-shadow':''" @click="changeAmount(item,item.Amount,item.Stock,1,productData.MinNum,1,productData.LimitBuy,productData.AddNum)">+</span>
                </div>
              </div>
              <div class="flex-s-c">
                <p class="color-gray"><span class="mr--2">￥</span>{{ item.Price.toFixed(2) }}</p>
                <div class="flex-s-0 cart-spec">
                  <p class="color-gray">库存：{{ item.Stock }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import { AddPurchaseCars } from 'api/purchase'
export default {
  name: 'PurchaseShopCart',
  components: {
    imgBox
  },
  props: {
    productData: { // 商品信息
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    carList: { // 购物车列表
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    carType: { // 类型
      type: String,
      required: false,
      default: 'purchase'
    },
    totalNum: {
      type: Number,
      required: false,
      default: 0
    },
    totalPrice: {
      type: Number,
      required: false,
      default: 0
    },
    totalType: {
      type: Number,
      required: false,
      default: 0
    },
    totalPay: {
      type: Number,
      required: false,
      default: 0
    },
    buyState: {
      type: Boolean,
      required: false,
      default: true
    },
    checkAllState: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      showList: false,
      cartList: [],
      totalMoney: 0,
      totalAmount: 0,
      cartRequestList: [],
      check: false
    }
  },
  watch: {
    carList(newVal, oldVal) {
      this.initData(newVal)
      this.totalMoney = this.getTotalMoney()
      this.totalAmount = this.getTotalAmount()
    }
  },
  mounted() {
    this.initData(this.carList)
    this.totalMoney = this.getTotalMoney()
    this.totalAmount = this.getTotalAmount()
  },
  methods: {
    initData(list) {
      this.cartList = list || []
      this.cartList.forEach(item => {
        if (item.PurchaseProductSkuByCarList && item.PurchaseProductSkuByCarList.length > 0) {
          item.PurchaseProductSkuByCarList.forEach(ite => {
            ite.PurchaseMemberId = item.PurchaseMemberId
          })
        }
      })
    },
    // 展示/隐藏购物车列表
    showCartList() {
      console.log('12')
      this.showList = !this.showList
    },
    hiddenCartList() {
      console.log('隐藏')
      this.showList = false
    },
    changeAmount(item, num, stock, type, MinimumOrder, unitRatio, limit, addNum) {
      const _oldAmount = item.Amount
      this.$utils.changeAmount(item, num, stock, type, MinimumOrder, unitRatio, limit, addNum)
      if (_oldAmount !== item.Amount || type === 0) {
        const _list = []
        _list.push(item)
        const _obj = {
          carList: _list,
          puchaseMemberId: item.PurchaseMemberId
        }
        console.log(_obj)
        this.$emit('updateCart', _obj)
      }
      this.totalMoney = this.getTotalMoney()
      this.totalAmount = this.getTotalAmount()
    },

    // 计算总额
    getTotalMoney() {
      let totalMoney = 0
      this.cartList.forEach(item => {
        if (item.PurchaseProductSkuByCarList && item.PurchaseProductSkuByCarList.length > 0) {
          item.PurchaseProductSkuByCarList.forEach(ite => {
            totalMoney += Number(ite.Price) * Number(ite.Amount)
          })
        }
      })
      return totalMoney.toFixed(2)
    },

    // 计算总数量
    getTotalAmount() {
      let totalAmount = 0
      this.cartList.forEach(item => {
        if (item.PurchaseProductSkuByCarList && item.PurchaseProductSkuByCarList.length > 0) {
          item.PurchaseProductSkuByCarList.forEach(ite => {
            totalAmount += parseInt(ite.Amount)
          })
        }
      })
      return totalAmount
    },
    // 结算
    submitBuy() {
      if (this.cartList && this.cartList.length > 0) {
        let car_ids = ''
        this.cartList.forEach(item => {
          if (item.PurchaseProductSkuByCarList && item.PurchaseProductSkuByCarList.length > 0) {
            item.PurchaseProductSkuByCarList.forEach(ite => {
              car_ids += ite.ID + ','
            })
          }
        })
        if (!car_ids) {
          this.$toast('没有选中商品！')
          return false
        }
        if (car_ids.indexOf('undefined') >= 0) {
          this.$toast('选中的商品数据异常！')
          return false
        }
        this.$router.push('/purchase/productsubmitorder/' + car_ids)
      }
    },
    // 去结算页面
    goSubmitOrder() {
      this.$emit('goSubmitOrder')
    },
    // 去购物车页面
    goCar() {
      this.$router.push('/purchase/car')
    },
    // 去支付
    gotoPay() {
      this.$emit('gotoPay')
    },
    // 全选、全不选
    checkAll() {
      this.$emit('checkAll')
    },

    // 清空购物车
    cleanCart() {
      this.$emit('cleanCart')
    },

    // 批量删除购物车商品api
    DeleteUserCar() {
      this.$emit('DeleteUserCar')
    },

    // 更新购物车
    AddPurchaseCars(obj) {
      AddPurchaseCars(obj).then(res => {
        if (res) {
          console.log(res)
          // this.showList = false
          // let _update = false
          // if (amount === 0) {
          //   _update = true
          // }
          // this.$emit('updateCart', _update)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.icon-box{
  width: 32px;
  height: 32px;
  border-radius: 100%;
}
.bottom-box{
  position: relative;
  background: $colorF;
  height: 130px;
  z-index: 2;
  .shop-cart-out{
    border-radius: 100%;
    left: 54px;
    top: -20px;
    overflow: visible;
    .shop-cart-in{
      border-radius: 100%;
      left: 6px;
      top: 6px;
      overflow: visible;
      .shop-cart-num{
        font-size: 22px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 15px;
        color: $colorF;
        background:$red;
        top: 0;
        left: 60px;
        z-index: 12;
      }
    }
  }
  .btn{
    position: absolute;
    right: 23px;
    top: 25px;
    width: 220px;
    line-height: 80px;
    border-radius: 40px;
    text-align: center;
  }
  .cart-num{
    position: absolute;
    font-size: 18px;
    line-height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    color: $colorF;
    @include bg-primary;
    top: -5px;
    left: 36px;
    z-index: 12;
  }
  .left-btn,.right-btn{
    width: 238px;
    width:50%;
    display: inline-block;
    border-radius: 40px 0 0 40px;
  }

  .right-btn{
    border-radius:0 40px 40px 0;
  }
}
.bottom-box-1{
  height: 120px;
  .btn{
    top: 20px;
  }
}
.cart-popup{
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  .cart-shadow{
    height: 100%;
    width: 100%;
    background: $colorOverlay;
  }
  .cart-list-box{
    position: absolute;
    background: #fff;
    width: 100%;
    left: 0;
    bottom: 130px;
    border-radius: 20px 20px 0 0;
    .cart-tle{
      background: $colorF4;
      height: 80px;
      border-radius: 20px 20px 0 0;
      padding:0 25px;
    }
    .cart-list{
      max-height: 50vh;
      overflow: auto;
      position: relative;
      .cart-item{
        padding-bottom: 24px;;
        &:last-child{
          border-bottom: 1px solid $colorBorder;
        }
        .cart-spec{
          width:170px;
        }
        .btn-input-box{
          position: relative;
          margin: 0 4px;
          .btn-input{
            position: relative;
            z-index: 1;
            height: 56px;
            width: 50px;
            line-height: 1;
            border: none;
            text-align: center;
          }
        }
      }
    }
  }
}

.checkbox{
 padding-left: 75px;
 padding-right: 75px;
 &:before{
   left: 23px;
 }
 &:after{
   left: 35px;
 }
}
.hollow-btn{
  line-height: 60px;
  margin:0 45px 0 20px;
  display: inline-block;
  min-width: 150px;
  border-radius: 30px;
  text-align: center;
}
</style>
